<template>
  <div id="selectBtn"
       @click="showDataList"
       :style="{width:widthData, backgroundColor:changeBg ?'rgba(255, 137, 21, 1)':''}">
    <div class="icon"><Icon :type="showData ? 'md-arrow-dropup' : 'md-arrow-dropdown'" size="18"/></div>
    <div class="sub-select-value">{{selectedValue.value}}
      <div class="sub-select-list" :style="{width:widthData}" v-if="showData">
        <div class="sub-select-item" v-for="(item, index) in dataList" :key="index" @click.stop="select(item,index)">
          {{item.value}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'selectBtn',
    props: {
      dataList: {
        type: Array,
        default () {
          return []
        }
      },
      selectedValue: Object, // 传回父组件的选择值
      widthData: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        showData: false,
        changeBg: true
      }
    },
    methods: {
      showDataList () {
        this.showData = !this.showData
        this.changeBg = !this.changeBg
      },
      select (item, index) {
        this.showData = false
        // console.log(item)
        // console.log(index)
        this.selectedValue.key = item.key
        this.selectedValue.value = item.value
        this.$emit('select', item)
        this.changeBg = !this.changeBg
      }
    },
    created () {

    },
    mounted () {

    },
    computed: {},
    destroyed () {

    },
    components: {}
  }
</script>
<style lang="scss">
  #selectBtn {
    position: relative;
    top: 0;
    float: right;
    border: 1px solid rgba(255, 137, 21, 1);
    border-radius: 4px;
    height: 40px;
    color: #fff;
    cursor: pointer;
    .icon{
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
    }
    .sub-select-value{
      position: absolute;
      top: 10px;
      font-size:14px;
      left: 12px;
      .sub-select-list {
        position: absolute;
        top: 36px;
        left: -12px;
        border-radius: 4px;
        border: 1px solid rgba(255, 137, 21, 1);
        z-index: 9;
        .sub-select-item {
          width: auto;
          height: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          &:hover{
            background-color: rgba(255, 137, 21, 1);
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
